<html>
<head>
    <title>Stock Ticker</title>
    <script src="https://d1fxtkz8shb9d2.cloudfront.net/sockjs-0.3.4.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.2/stomp.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        var stomp = Stomp.over(new SockJS("/ws"));

        function displayStockPrice(frame) {
            var prices = JSON.parse(frame.body);

            $('#price').empty();

            for (var i in prices) {
                var price = prices[i];

                $('#price').append(
                        $('<tr>').append(
                                $('<td>').html(price.code),
                                $('<td>').html(price.price.toFixed(2)),
                                $('<td>').html(price.dateFormatted)
                        )
                );
            }
        }

        var connectCallback = function () {
            stomp.subscribe('/topic/price', displayStockPrice);
        };

        var errorCallback = function (error) {
            alert(error.headers.message);
        };

        stomp.connect("guest", "guest", connectCallback, errorCallback);

        $(document).ready(function () {
            $('.addStockButton').click(function (e) {
                e.preventDefault();

                var jsonstr = JSON.stringify({ 'code': $('.addStock .code').val(),
                    'price': Number($('.addStock .price').val()) });

                stomp.send("/app/addStock", {}, jsonstr);

                return false;
            });
        });
    </script>
</head>
<body>
<h1><b>Stock Ticker</b></h1>
<table border="1">
    <thead>
    <tr>
        <th>Code</th>
        <th>Price</th>
        <th>Time</th>
    </tr>
    </thead>
    <tbody id="price"></tbody>
</table>
<p class="addStock">
    Code: <input class="code"/><br/>
    Price: <input class="price"/><br/>
    <button class="addStockButton">Add Stock</button>
</p>
</body>
</html>
